<template>
  <div class="app-warp">
      <div class="imgQuestionBox">
        <div class="imgQuestionLeft">
          <div class="Box">
            <el-scrollbar style="height:100%;" class="questionBox">
              <div class="chapterImgBox" :style="{width:nowWidth+'px',height:nowWidth/(realWidth/realHeight)+'px'}">
                <div v-for="(element, questionIndex) in imgData" :key="questionIndex"
                     :style="classInit(element, realWidth)" @click="ChapterClick(questionIndex)"
                     :class="{chapterSelect:true, selected: selected === questionIndex}"></div>
                <img class="QuestionImg" :src="imgSrc" @load="changeSliderStyle"/>
              </div>
            </el-scrollbar>

            <!--        <div class="toolBar_bottom">-->
            <!--            <div class="tools">-->
            <!--                <div class="el-icons">-->
            <!--                    <a href="" @click="bigger" title="放大">-->
            <!--                        <i class="el-icon-zoom-in"></i>-->
            <!--                    </a>-->
            <!--                </div>-->
            <!--                <div class="el-icons" style="margin-left: 50px">-->
            <!--                    <a href="" @click="little" title="缩小">-->
            <!--                        <i class="el-icon-zoom-out"></i>-->
            <!--                    </a>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--        </div>-->
          </div>
        </div>
        <div class="imgQuestionRight">
          <el-scrollbar style="height:100%;" class="questionListBox">
            <p v-for="(element, index) in listData" :key="index"
               :class="{'questionList': true, 'listSelected': selected === index}"
               @click="questionListSelect(index)">
              <span>{{element}}</span>
            </p>
          </el-scrollbar>
        </div>
      </div>
  </div>
</template>

<script>
import {Loading} from "element-ui";
import axios from 'axios';
import {getRecognitionResult} from "@/api/log"
export default {
  name: "app-main-distinguish",
  props:[],
  data() {
    return {
      scaleNum: 1, // 图片缩放倍数
      nowWidth: 565, // 当前章节图片盒子的宽度
      initWidth: 565, // 初始化章节图片的宽度
      realWidth: 1, // 章节图片的实际宽度
      realHeight: 1, // 章节图片的实际高度
      imgSrc: 'http://qp-tiku-test.oss-cn-beijing.aliyuncs.com/ocr-img/jpg/29f8b735-4e02-4030-b383-3628a846fcd0.jpg', // 图片地址
      imgData: [], // 图片识别的定位块数据
      listData: [], // 图片识别的列表数据
      selected: '', // 选中的问题方块信息  --pageindex_posIndex_questionIndex
      selectJson: {}, // 选中的问题方块存储的数据
      recId: -1
    };
  },
  methods: {
    /* 初始化图书页面图片及覆盖物 */
    initPage() {
      const _this = this;
      /* 处理图片数据 */
      _this.changeImgData();
      /* 初始化设定固定的滚动模块高度以及章节图片宽度 */
      _this.changeSliderStyle();
    },
     
    changeImgData() {
      const _this = this;
      if(_this.$route.query.imgUrl){
        _this.imgSrc = _this.$route.query.imgUrl;
        _this.recId = _this.$route.query.recId;
      }
      let respJson = {"img_url": _this.imgSrc, "rec_id": _this.recId};
      console.log("respJson", respJson);
      getRecognitionResult(respJson).then(function(data){
        // console.log('data', data)
        data = data.replace(/\+/g, '%20');
        let result = JSON.parse(decodeURIComponent(data));
        let listDataArray = [];
        let imgDataArray = [];
        result.forEach(function (element, index) {
          let string = '';
          let x1 = 0;
          let y1 = 0;
          let x2 = 0;
          let y2 = 0;
          element.forEach(function (element1, index1) {
            /* 合并识别的数据 */
            string += element1.ench || `$${element1.formula}$`;
            /* 转换坐标 */
            if (index1 === 0) {
              x1 = element1.pos[0];
            }

            if (y1 === 0) {
              y1 = element1.pos[1];
            } else if (y1 > element1.pos[1]) {
              y1 = element1.pos[1];
            }

            if (index1 === (element.length - 1)) {
              x2 = element1.pos[2];
            }

            if (y2 === 0) {
              y2 = element1.pos[3];
            } else if (y2 < element1.pos[3]) {
              y2 = element1.pos[3];
            }
          });
          let json = {
            width: x2 - x1,
            height: y2 - y1,
            y: y1,
            x: x1
          };
          listDataArray.push(string);
          imgDataArray.push(json);
        });
        _this.listData = listDataArray;
        _this.imgData = imgDataArray;
        /* 渲染后转换数学公式 */
        _this.changeMathStyle();         
        }).catch(function(err){
            console.log(err);
        });
 
      
    },
    /* 转换数学公式方法 */
    changeMathStyle() {
      this.$nextTick(function () {
        MathJax.Hub.Config({
          showProcessingMessages: false, //关闭js加载过程信息
          messageStyle: "none", //不显示信息
          jax: ["input/TeX", "output/HTML-CSS"],
          tex2jax: {
            inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
            displayMath: [["$$", "$$"], ["\\[", "\\]"], ["\\(", "\\)"]], //段内公式选择符
            skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
          },
          "HTML-CSS": {
            availableFonts: ["STIX", "TeX"], //可选字体
            showMathMenu: false //关闭右击菜单显示
          }
        });
        window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementsByClassName("imgQuestionRight")[0]]);
      });
    },
    /* 初始化图片章节选项覆盖物 */
    classInit(element, width) {
      const _this = this;
      /* 计算缩放倍数 */
      let scale = _this.nowWidth / width;
      return {
        width: Math.round(scale * element.width) + 'px',
        height: Math.round(scale * element.height) + 'px',
        top: Math.round(scale * element.y) + 'px',
        left: Math.round(scale * element.x) + 'px'
      };
    },
    /* 放大按钮的点击事件 */
    bigger() {
      const _this = this;
      if (_this.scaleNum >= 5) {
        return false;
      } else {
        _this.scaleNum = _this.scaleNum + 0.1;
        _this.nowWidth = parseInt(_this.initWidth * _this.scaleNum);
      }
    },
    /* 缩小按钮的点击事件 */
    little() {
      const _this = this;
      if (_this.scaleNum <= 0.6) {
        return false;
      } else {
        _this.scaleNum = _this.scaleNum - 0.1;
        _this.nowWidth = parseInt(_this.initWidth * _this.scaleNum);
      }
    },
    /* 章节选中框的点击事件 */
    ChapterClick(questionIndex) {
      this.selected = questionIndex;
      setTimeout(function () {
        document.getElementsByClassName('questionListBox')[0].children[0].scrollTo(0, document.getElementsByClassName('listSelected')[0].offsetTop);
      }, 1);
    },
    /* 问题列表点击事件 */
    questionListSelect(index) {
      this.selected = index;
      setTimeout(function () {
        document.getElementsByClassName('questionBox')[0].children[0].scrollTo(0, document.getElementsByClassName('selected')[0].offsetTop);
      }, 1);
    },
    /* 监听页面尺寸变动事件 */
    changeSliderStyle() {
      /* 获取图片的原始宽高 */
      this.realWidth = document.getElementsByClassName('QuestionImg')[0].naturalWidth;
      this.realHeight = document.getElementsByClassName('QuestionImg')[0].naturalHeight;
      let clientHeight = document.getElementsByClassName('Box')[0].clientHeight;
      let clientWidth = document.getElementsByClassName('Box')[0].clientWidth;
      /* 初始化设定动态章节图片模块宽度 */
      this.nowWidth = clientWidth;
      this.initWidth = this.nowWidth;
      this.scaleNum = 1;
    }
  },
  computed: {

  },
  destroyed() {
    /* 销毁页面尺寸变动事件 */
    window.removeEventListener('resize', this.changeSliderStyle);
  },
  mounted() {
    const _this = this;
    /* 初始化图书页面图片及覆盖物 */
    _this.initPage();
    /* 监听页面尺寸变动事件 */
    window.addEventListener('resize', _this.changeSliderStyle);
  }
}
</script>

<style scoped lang="scss">
.Box{
  /*position: fixed;*/
  /*top: 0px;*/
  /*left: 0px;*/
  /*width: 100vw;*/
  /*height: 100vh;*/
  /*z-index: 1000000;*/
  width: 100%;
  height: 100%;
}
.chapterImgBox{
  /*position: absolute;*/
  /*top: 0px;*/
  /*left: 0px;*/
  /*right: 0px;*/
  /*bottom: 0px;*/
  position: relative;
  margin: auto;
  background: #000;
  transition: all 0.5s;
  img{
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    display: block;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
  }
}
.chapterSelect{
  position: absolute;
  border-radius: 5px;
  cursor: pointer;
  &:hover{
    border: 1px solid #23a285;
    box-shadow: 0px 0px 5px #27b494;
    background: rgba(35, 162, 133, 0.2);
  }
}
.selected{
  border: 1px solid #23a285;
  box-shadow: 0px 0px 5px #27b494;
  background: rgba(35, 162, 133, 0.2);
}
.chapterCtrBox{
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.pageCtr{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: #666;
  span{
    font-size: 15px;
    font-weight: 600;
    color: #000;
  }
}
.selectCtr{
  cursor: pointer;
  font-size: 12px;
  display: inline-block;
  background: rgb(255, 148, 72);
  border-radius: 20px;
  color: #fff;
  padding: 3px 10px;
  line-height: 20px;
}
//下方工具栏
.toolBar_bottom {
  position: absolute;
  // left: 5px;
  margin: auto;
  border-radius: 10px;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: rgba(105, 105, 105, 1);
  .tools {
    width: 200px;
    padding: 12px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-icons {
      text-align: center;
      a {
        i {
          color: #fff;
          font-size: 22px;
        }
      }
    }
  }
}

.imgQuestionBox{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .imgQuestionLeft{
    width: 60%;
    border-right: 1px solid #eee;
  }
  .imgQuestionRight{
    width: 38%;
  }
}
.questionList{
  font-size: 15px;
  color: #666;
  line-height: 25px;
  min-height: 60px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding: 0 5px;
  &:hover{
    background: rgba(35, 162, 133, 0.2);
  }
}
.listSelected{
  background: rgba(35, 162, 133, 0.2);
}
</style>